<template>
  <div>

    <devpageForPro v-if="ifdev" @close="ifdev = 0" />
    <div class="top">
      <div class="head">L</div>
      <span class="title">低代码</span>
      <div class="right-top">
        <span class="righttop-item"><img class="img" src="./assets/email-fill.png" style="transform: scale(1.1);"
            alt=""></span>
        <span class="righttop-item"><img class="img" src="./assets/gitee.png" alt=""></span>
        <div class="right-top-hover">
          <div>合作邮箱：</div>
          <div>1932053@163.com</div>
          <div style="margin-top: 20px;">gitee主页 |<span
              style="display: inline-block;text-decoration: underline;">↗</span>：</div>
          <div><span @click="tolink('https://gitee.com/xie-zhiyi-2')"
              style="cursor: pointer;">https://gitee.com/xie-zhiyi-2</span></div>
        </div>
      </div>
    </div>
    <div class="cont">
      <!-- 右边内容 -->
      <div class="rightcont">
        <div class="thetitle">
          <div class="thetitle-cell" :class="{ 'thetitle-cell-active': rightTab == 0 }"
            :style="{ backgroundColor: rightTab == 0 ? '#f4f4f4' : '' }" @click="rightTab = 0">控件列表
          </div>
          <div class="thetitle-cell" :class="{ 'thetitle-cell-active': rightTab == 1 }"
            :style="{ backgroundColor: rightTab == 1 ? '#f4f4f4' : '' }" @click="rightTab = 1">控件参数
          </div>
        </div>
        <div class="thecont" v-if="rightTab == 0">
          <div style="padding-bottom: 80px;">
            <div class="contitem" v-for="v in rightdata" @click="addcont(v)">{{ v.nick }}</div>
            <div style="clear: both;"></div>
          </div>
        </div>
        <div class="thecont" v-if="rightTab == 1">
          <div style="padding-bottom: 80px;">
            <contSet :="{ leftdata, editType, editid, editdefaulttitle }" v-if="editid" @tosetleftdata="tosetleftdata" />
          </div>
        </div>
      </div>
      <!-- 左边内容 -->
      <div style="position: relative;height:100%">
        <div class="leftcont" v-show="ifshowchode == false">
          <div style="padding-bottom: 80px;" id="leftcont">
            <div v-for="(v, i) in leftdata" :key="v.id">
              <div>
                <div class="leftcont-righttop">
                  <span style=" margin-right: 20px;" v-if="editid == v.id">←</span>
                  <span style="position: relative; margin-right: 20px; cursor: move;z-index: 3;"
                    class="itemmove">&equiv;</span>
                  <span @click="deldata(i)" style="cursor: pointer;">×</span>
                </div>
                <span style="display: inline-block;padding:10px 20px 0px;">
                  {{ v.nick }}
                </span>
                <div style="clear: both;"></div>
              </div>
              <contsShow :="{ obj: v }" @setleftdata="setleftdata" />
            </div>
          </div>
          <div class="leftempty" v-if="!leftdata.length">
            <div style="display: inline-block;vertical-align: middle; line-height: normal;color: #999;">
              <span style="font-size: 100px;">···</span><br>
              点击右边内容进行添加模块到空白区域
            </div>
          </div>
        </div>
        <div class="leftcont" style="overflow: hidden;" v-if="ifshowchode == true">
          <textarea :value="decodePagecode" name="" id="" cols="30" rows="10"
            style="resize: none;box-sizing: border-box; padding: 20px; height: 100%;width: 100%;background-color: #333;color: white;"
            readonly></textarea>
          <div class="lastdemoview" @click="ifdev = 1">实时效果参考</div>
        </div>
        <div class="bottombtnShowcode" v-if="leftdata.length" @click="ifshowchode = !ifshowchode">{{ ifshowchode ? '返回视图'
          : '查看代码' }}</div>
        <div class="bottombtnShowcode" v-else style="opacity: .7;cursor:not-allowed;">{{ ifshowchode ? '返回视图' : '查看代码' }}
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import componentJson from './assets/componentJson.js'
import contSet from './components/contSet.vue'
import contsShow from './components/contShow.vue'
import devpageForPro from './components/devpageForPro.vue'
export default {
  data() {
    return {
      ifdev: 0,//1为打开视图调试
      //
      rightTab: 0,
      rightdata: [...componentJson.type],
      leftdata: [],
      flag: 1,
      editid: '',
      editType: '',
      editdefaulttitle: '',
      ifshowchode: false
    }
  },
  components: {
    contSet,
    contsShow,
    devpageForPro
  },
  methods: {
    tolink(l) {
      window.open(l)
    },
    addcont(v) {
      if (this.flag == 0) {
        return;
      }
      this.flag = 0
      var jsonobj = { ...componentJson.cont[v.name] };
      jsonobj.id = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate()) + '_' + (new Date().getHours() + '_' + new Date().getMinutes() + '_' + new Date().getSeconds() + '_' + new Date().getMilliseconds())
      jsonobj.nick = v.nick;
      this.leftdata.push(jsonobj)
      setTimeout(() => {
        this.flag = 1
        console.log(this.decodePagecode)
      })
    },
    deldata(i) {
      if (this.leftdata[i].id == this.editid) {
        this.rightTab = 0
        this.editid = ''
        this.editType = ''
        this.editdefaulttitle = ''
      }
      this.leftdata.splice(i, 1)
      console.log(this.decodePagecode)
    },
    setleftdata(id) {
      this.rightTab = 1
      this.editid = ''
      this.editType = ''
      this.editdefaulttitle = ''
      setTimeout(() => {
        this.editid = id
        this.leftdata.map((item) => {
          item.id == this.editid ? this.editType = item.name : ''
          item.id == this.editid ? this.editdefaulttitle = item.default : ''
        })
      })
    },
    tosetleftdata(options) {
      this.leftdata.map((item) => {
        item.id == this.editid ? (
          options && options.title ? item.nick = options.title : '',
          options && options.rightbutton ? item.ifrightbutton = (options.rightbutton == 'close' ? 0 : 1) : '',
          options && options.ifdub ? item.ifdub = (options.ifdub == 'close' ? 0 : 1) : '',
          options && options.count ? item.count = options.count : ''
        ) : ''
      })
      console.log(this.decodePagecode)
    },
    //
    onDrops() {
      const tbody = document.querySelector("#leftcont");
      const _this = this;
      Sortable.create(tbody, {
        // 官网上的配置项,加到这里面来,可以实现各种效果和功能
        animation: 150,
        handle: ".itemmove",  // 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动
        // ghostClass: "blue-background-class",
        onEnd({ newIndex, oldIndex }) {
          _this.leftdata.splice(
            newIndex,
            0,
            _this.leftdata.splice(oldIndex, 1)[0]
          );
          var newArray = _this.leftdata.slice(0);
          _this.leftdata = [];
          _this.$nextTick(function () {
            _this.leftdata = newArray;
          });
          setTimeout(() => {
            console.log(_this.decodePagecode)
          })
        },
      });
    }
  },
  computed: {
    decodePagecode: componentJson.decodePagecode
  },
  mounted() {
    setTimeout(() => {
      this.onDrops()
    })
  }
}
</script>

<style scoped>
.top {
  height: 60px;
  background-color: #ccc;
}

.head {
  display: inline-block;
  margin: 0px 0 0 10px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  border-radius: 50%;
  background-color: #5d40b5;
}

.title {
  display: inline-block;
  margin-left: 15px;
  vertical-align: middle;
  font-size: 24px;
  font-weight: 800;
  line-height: 60px;
  color: #382992;
}

.right-top {
  position: relative;
  float: right;
  padding-right: 10px;
  line-height: 60px;
  font-size: 0;
  z-index: 5;
}

.righttop-item {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
}

.righttop-item .img {
  display: inline-block;
  margin-left: 20px;
  vertical-align: top;
  width: 20px;
  height: 20px;
}

.right-top-hover {
  display: none;
  position: absolute;
  right: 0;
  top: 60px;
  padding: 20px;
  width: 200px;
  line-height: normal;
  background-color: #ffffff;
  font-size: 16px;
  border: 1px solid #ccc;
}

.right-top:hover {
  background-color: #bbb;
}

.right-top:hover .right-top-hover {
  display: block;
}

.cont {
  height: calc(100vh - 60px);
}

.rightcont {
  position: relative;
  float: right;
  height: 100%;
  width: 280px;
  border-left: 1px solid #ccc;
  z-index: 3;
}

.rightcont .thetitle {
  display: table;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-bottom: 5px solid #eee;
}

.rightcont .thetitle-cell {
  position: relative;
  display: table-cell;
  width: 50%;
  cursor: pointer;
}

.rightcont .thetitle-cell-active:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: #ccc;
}

.rightcont .thecont {
  position: relative;
  height: calc(100% - 66px);
  overflow: hidden auto;
}

.lastdemoview {
  position: absolute;
  right: 30px;
  top: 30px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid#ccc;
  cursor: pointer;
}

.bottombtnShowcode {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 280px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #d5d7e1;
  color: #666;
  border-top: 1px solid #ccc;
  cursor: pointer;
}

.contitem {
  position: relative;
  float: left;
  width: 50%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  user-select: none;
}

.contitem:after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  height: 100%;
  border-right: 1px solid #ccc;
}

.leftcont {
  position: relative;
  margin-right: 280px;
  height: calc(100vh - 120px);
  overflow: hidden auto;
  user-select: none;
  background-color: #eee;
}

.leftcont-righttop {
  float: right;
  padding: 10px 20px 10px 0;
  height: 10px;
  font-size: 20px;
}

.leftempty {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: calc(100vh - 120px);
  text-align: center;
}
</style>